<template>
  <audio :src="authAudio" controls>
    <source :src="authAudio" type="audio/ogg">
    <source :src="authAudio" type="audio/mpeg">
    您的浏览器不支持 audio 元素
  </audio>
</template>

<script setup name="">
import util from '@/utils/utils'
import { ref, watch } from "vue";
const props = defineProps({
  audioUrl: {
    type: String,
    default: '',
  }
});
const authAudio = ref('');
function getAudioUrl(){
  const request = new XMLHttpRequest();
  request.responseType = 'arraybuffer';
  request.open('get', import.meta.env.VITE_BASE_API+`/getFile?filePath=${props.audioUrl}`, true);
  let token = util.getToken();
  if(!token){
    token = "";
  }
  request.setRequestHeader(util.getTokenKey(), token);
  request.onreadystatechange = e => {
    if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
      //console.log(request.response);
      //let base64Img = btoa(String.fromCharCode.apply(null, new Uint8Array(request.response)));
      // console.log('图片',base64Img);
      authAudio.value = window.URL.createObjectURL(new Blob([request.response], { type: 'audio/mpeg' }));
    }
  };
  request.send(null);
}
watch(()=> props.audioUrl,()=>{
  getAudioUrl();
})
getAudioUrl();
</script>

<style lang="scss">
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 14px;
}
</style>
